<template>
  <div class="common-layout" style="margin-left: 70px;margin-right: 70px;">
    <el-container style="height: 600px">
      <el-aside width="150px">
        <div style="background-color: white;width: 150px;height: 550px;margin-top: 20px;display: flex; flex-direction: column;">
          <router-link to="/personalCenter" class="router">个人中心</router-link>
          <router-link to="/cart" class="router">我的购物车</router-link>
          <router-link to="/myOrder" class="router">我的订单</router-link>
          <router-link to="" class="router">评价管理</router-link>
          <router-link to="" class="router">我的发票</router-link>
          <router-link to="" class="router">我的优惠卷</router-link>
          <router-link to="" class="router">我的积分</router-link>
          <router-link to="" class="router">我的收藏</router-link>
          <router-link to="" class="router">我的足迹</router-link>
          <router-link to="/personalInfo" class="router">个人信息</router-link>
          <router-link to="" class="router">账号设置</router-link>
          <router-link to="" class="router">我的收货地址</router-link>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div style="background-color: white;width: auto;margin-top: 20px;overflow: hidden;position: relative">
          <el-menu mode="horizontal" active-text-color="red" style="font-weight:bolder">
            <el-menu-item index="1" class="container">所有订单</el-menu-item>
            <el-menu-item index="2" class="container">待付款</el-menu-item>
            <el-menu-item index="3" class="container">待发货</el-menu-item>
            <el-menu-item index="4" class="container">配送中</el-menu-item>
            <el-menu-item index="5" class="container">待评价</el-menu-item>

          </el-menu>

          <div style="background-color: white">
            <el-form style="display:flex;margin-left:20px;">
              <el-form-item label="商品名称:" style="margin-left:10px;margin-top:20px;">
                <el-input v-model="order.commodity" placeholder="请输入品牌"></el-input>
              </el-form-item>
              <el-form-item label="订单编号:" style="margin-left:10px;margin-top:20px;">
                <el-input v-model="order.orderNumber" placeholder="请输入订单号"></el-input>
              </el-form-item>
              <el-form-item label="下单时间:" style="margin-left:10px;width:300px;margin-top:20px;">
                <el-date-picker
                    type="datetime"
                    start-placeholder="开始日期"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    format="YYYY-MM-DD HH:mm:ss"
                    v-model="times[0]"
                ></el-date-picker>
              </el-form-item>
            </el-form>
            <el-form style="display: flex;margin-left:20px;">
              <el-form-item label="评价状态:" style="margin-left:10px;width:265px">
                <el-select placeholder="请选择"  v-model="order.operate">
                  <el-option label="待评价" value="待评价"/>
                  <el-option label="已评价" value="已评价"/>
                </el-select>
              </el-form-item>
              <el-form-item label="交易状态:" style="margin-left:10px;width:265px" >
                <el-select placeholder="请选择" v-model="order.status">
                  <el-option label="待付款" value="1"/>
                  <el-option label="待接单" value="2"/>
                  <el-option label="待发货" value="3"/>
                  <el-option label="待收货" value="4"/>
                  <el-option label="待评价" value="5"/>
                  <el-option label="交易成功" value="6"/>
                </el-select>
              </el-form-item>
              <el-form-item label="完成时间:" style="margin-left:10px;width:300px">
                <el-date-picker
                    type="datetime"
                    end-placeholder="结束日期"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    format="YYYY-MM-DD HH:mm:ss"
                    v-model="times[1]"
                ></el-date-picker>
              </el-form-item>
              <el-form-item style="margin-left: 20px">
                <el-button type="primary" @click="select">搜索</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
          </div>

<!--商品展示-->
          <el-table :data="arr" border="1px" style="margin-top:20px">
            <el-table-column  align="center" prop="commodity"  label="商品" width="250" >
              <template v-slot:default="scope">
              <img :src="scope.row.imgUrl" align="center" style="float:left;height:100px;width:100px;">
              <span style="margin-left:10px;text-align:center;line-height:100px;float: left">{{scope.row.description}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderNumber" label="订单号" align="center"/>
            <el-table-column prop="specification" label="规格"  align="center"/>
            <el-table-column prop="price" label="单价(元)" align="center"/>
            <el-table-column prop="count" label="数量" align="center"/>
            <el-table-column prop="payment" label="实付款(元)" align="center"/>
            <el-table-column prop="status" label="交易状态" align="center">
              <span style="align-items: center" >{{ statusFormatter(number.number) }}</span>
              <br>
              <a @click="details(numbers.orderNumber)" style="color:blue;align-items: center">订单详情</a>
              <br>
              <el-button type="primary" style="align-items: center" @click="goToPayment()">{{lin.lin}}</el-button>
            </el-table-column>
            <el-table-column  label="操作" align="center">
              <template  v-slot="{ row }">
              <a href="">{{row.operate}}</a>
              </template>
            </el-table-column>
          </el-table>
            <div style="margin: 30px;float: right;height: 17px">
              <el-pagination
              layout="pager,next,jumper"
              v-model:current-page="currentPage"
              v-model:page-size="currentSize"
              v-model:total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-header>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
//定义分页器当前页数
const currentPage = ref(1);
//定义分页器每页显示多少条
const currentSize = ref(2);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  select();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  select();
}
//查询
const select = () => {
  //模仿传过来的用户id----------------------------------------------------------------------
  let orders = '1';
  order.value.orders = orders.valueOf();
  order.value.orderTime = times.value[0];
  order.value.finishTime = times.value[1];
  order.value.pageSize = currentSize.value;
  order.value.pageNum = currentPage.value;
  let data = qs.stringify(order.value);
  axios.get(BASE_URL+"/v1/order/select?"+data).then((response)=>{
    if(response.data.code == 2000){
      console.log('查看PageData返回的数据:')
      console.log(response.data)
      total.value = response.data.data.total;//设置总条目数
        arr.value = response.data.data.list;
        if (arr.value.length > 0 && arr.value[0].status != null && arr.value[0].status !== '') {
          number.value.number = arr.value[0].status;
        }
      numbers.value.orderNumber = arr.value.orderNumber;
      order.value = {};
      times.value = [];
    }else {
      ElMessage.error(response.data.msg)
    }
  });
}
//查询的值
const order = ref({
  orders:'',commodity:'',orderNumber:'',status:'',orderTime:'',finishTime:'',operate:''
})
//查询的时间值
const times = ref([]);
//展示的值
const arr = ref([
  {imgUrl:'',description:'',orderNumber:'',specification:'',price:'',count:'',payment:'',status:'',operate:''}
])
//传输的订单号
const numbers = ref({orderNumber:''});
//浏览就加载
onMounted(()=>{
  select();
})
//状态字典所需状态值
const number = ref({number:''});
//状态按钮
const lin = ref({lin:'去付款'});
//跳转网页的值
const string = ref({string:'/payment'})
//状态字典
const statusFormatter = (cellValue) => {
  switch (cellValue) {
    case 1:
      lin.value.lin = '待付款';
      break;
    case 2:
      lin.value.lin = '待接单';
      string.value.string = '';
      break;
    case 3:
      lin.value.lin = '待发货';
      string.value.string = '';
      break;
    case 4:
      lin.value.lin = '待收货';
      string.value.string = '';
      break;
    case 5:
      lin.value.lin = '待评价';
      string.value.string = '';
      break;
    case 6:
      lin.value.lin = '交易成功';
      string.value.string = '';
      break;
  }
  switch (cellValue) {
    case 0:
      return '待提交';
    case 1:
      return '已提交';
    case 2:
      return '已付款';
    case 3:
      return '已接单';
    case 4:
      return '已发货';
    case 5:
      return '已收货';
    case 6:
      return '已评价';
  }
}
//跳转页面
const goToPayment = () => {
  router.push(string.value.string)
}
//传订单号到订单详情页面
const details = (orderNumber) =>{
  router.push({ path: 'orderDetails', query: { orderNumber: orderNumber } })
}

</script>

<style scoped>
.container {
  position: relative;
  padding: 4px;
  width: 100px;
}

.container::after {
  content: "";
  position: absolute;
  right: 0;
  button:35%;/* 调整底部位置以距离35% */
  top: 35%; /* 调整顶部位置以距离35% */
  width:1px; /* 边框宽度 */
  height:30%; /* 边框高度 */
  background-color:#D3D3D3;
}

.router {
  margin-bottom: 10px;
  text-decoration: none;
  margin-left: 40px;
  margin-top: 10px;
}

.router:hover {
  /* 鼠标悬浮时的样式 */
  color: red; /* 例如，改变文字颜色为红色 */
}

.d1 svg {
  /* 根据需要设置SVG的宽度和高度，以确保它们与文本对齐 */
  width: 20px; /* 或者其他合适的值 */
  height: 30px; /* 或者其他合适的值，注意与文本行高匹配 */
  vertical-align: middle; /* 使SVG与文本垂直居中对齐 */
  margin-right: 30px;
  /* 其他样式... */
}

span {
  vertical-align: middle; /* 确保文本与SVG垂直居中对齐 */
  /* 其他样式... */
}
</style>